<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
</head>
<script type="text/javascript"
	src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=xXgGEONo5fqg585HvS1rHIKylYfBXDVz">
	</script>
<script>

</script>
<!-- 引入样式 -->
<!-- 引入组件库 -->
<!-- <script src="https://unpkg.com/element-plus/lib/index.js"></script> -->
<script src="./utils.js"></script>

<body>
	<div id="popup" class="popup-container">
		<div class="popup-content">
			<p>确认修改当前街道管道为下一个状态吗？</p>
			<div class="btns">
				<div class="btn close" onclick="hidePopup()">取消</div>
				<div class="btn confirm" onclick="confirmPopup()">确认</div>
			</div>
		</div>
	</div>
	<div id="popup1" class="popup-container">
		<div class="popup-content">
			<p>当前管道已完成,确认重置为初始状态吗？</p>
			<div class="btns">
				<div class="btn close" onclick="hidePopup()">取消</div>
				<div class="btn confirm" onclick="confirmPopup()">确认</div>
			</div>
		</div>
	</div>
	<!-- <form id="form">
		<div class="option">
			<input type="radio" id="option1" name="group1" value="option1">
			<label for="option1">未施工</label><br>

			<input type="radio" id="option2" name="group1" value="option2">
			<label for="option2">施工中</label><br>

			<input type="radio" id="option3" name="group1" value="option3">
			<label for="option3">已施工</label><br>
		</div>
	</form> -->
	<div id="container">
	</div>
	<div class="map-type">
		<button id="weixing" onclick="handleMap()">切换卫星图</button>
		<button id="biaozhun" onclick="handleMap()">切换标准地图</button>
	</div>
	<div class="mark">
		<div class="box">
			<span class="green"></span> 已施工
		</div>
		<div class="box">
			<span class="orange"></span> 施工中
		</div>   
		<div class="box">
			<span class="red"></span> 未施工
		</div>
	</div>
</body>

<script>
	let currentMap = 1

	let map = new BMapGL.Map("container");
	function initMap1() {
		// var point = new BMapGL.Point(117.32, 33.32);  
		// map.centerAndZoom(point, 15);
		map.centerAndZoom(new BMapGL.Point(117.32, 33.32), 18);

		map.enableScrollWheelZoom(true);
		// map.setHeading(64.5);
		map.setTilt(60);
		map.setMapType(BMAP_NORMAL_MAP);
		map.setMapStyleV2({     
			styleId: 'd12553d0b9528b2cabb2af6dc685e03d'
		});
		map.setDisplayOptions({
			building: true
		})
		var cityCtrl = new BMapGL.CityListControl({
			anchor: BMAP_ANCHOR_BOTTOM_RIGHT
		});  // 添加城市列表控件
		map.addControl(cityCtrl);
		// var animation = new BMapGL.ViewAnimation(keyFrames1, opts);
		// map.startViewAnimation(animation); 
		// setTimeout(()=>{
		// 	map.setTilt(60);
		// 	// map.setHeading(64.5);
		// 	var point = new BMapGL.Point(117.32, 33.32);
		// 	map.centerAndZoom(point, 18);
		// },3000)
	}
	function initMap2() {
		// map = new BMapGL.Map("container");
		map.centerAndZoom(new BMapGL.Point(1116.414,39.915), .1);
		map.setTilt(0);
		map.enableScrollWheelZoom(true);
		map.setMapType(BMAP_SATELLITE_MAP);
		var animation = new BMapGL.ViewAnimation(keyFrames2, opts);
		map.startViewAnimation(animation); 
		setTimeout(()=>{
			var point = new BMapGL.Point(117.32, 33.32);
			map.centerAndZoom(point, 16);
		},1500)
	}

	initMap1()
	localStorage.setItem('currentMap', currentMap)

	var weixing = document.getElementById('weixing');
	var biaozhun = document.getElementById('biaozhun');
	biaozhun.style.display = 'none';
	weixing.style.display = 'block';
	function handleMap() {
		console.log(currentMap,weixing,'currentMap');
		if(currentMap==0){
			currentMap=1
			initMap1()
			biaozhun.style.display = 'none';
			weixing.style.display = 'block';
		}else{
			currentMap=0
			initMap2()
			weixing.style.display = 'none';
			biaozhun.style.display = 'block';
		}
		// localStorage.setItem('currentMap', currentMap)
		setLocalStorageItem('currentMap', currentMap)
		// map.setMapType(BMAP_SATELLITE_MAP);
		// currentMap=0
	}
	function setLocalStorageItem(key, value) {
		localStorage.setItem(key, value);
		const event = new CustomEvent('localStorageChange', { detail: { key, value } });
		window.dispatchEvent(event);
	}


	var keyFrames1 = [
    {
        center: new BMapGL.Point(1116.414,39.915),     // 定义第一个关键帧帧地图中心点
        zoom: 1,                                      // 定义第一个关键帧地图等级
        tilt:0,                                      // 定义第一个关键帧地图倾斜角度
        heading: 0,                                    // 定义第一个关键帧地图旋转方向
        percentage: 0                                  // 定义第一个关键帧处于动画过程的百分比，取值范围0~1
    },
    {
        center: new BMapGL.Point(117.32, 33.32),     // 定义第二个关键帧地图中心点
        zoom: 15,                                      // 定义第二个关键帧地图等级
        tilt: 73,  
        // heading: 60,                                    // 定义第一个关键帧地图旋转方向
        percentage: 100                                  // 定义第一个关键帧处于动画过程的百分比，取值范围0~1
		}
	]
	var keyFrames2 = [
    {
        center: new BMapGL.Point(1116.414,39.915),     // 定义第一个关键帧帧地图中心点
        zoom: 1,                                      // 定义第一个关键帧地图等级
        tilt: 0,                                      // 定义第一个关键帧地图倾斜角度
        heading: 0,                                    // 定义第一个关键帧地图旋转方向
        percentage: 0                                  // 定义第一个关键帧处于动画过程的百分比，取值范围0~1
    },
    {
        center: new BMapGL.Point(117.32, 33.32),     // 定义第二个关键帧地图中心点
        zoom: 18,                                      // 定义第二个关键帧地图等级
        // tilt: 60,  
        // percentage: 100                                  // 定义第一个关键帧处于动画过程的百分比，取值范围0~1
		}
	]
	var opts = {
    duration: 3000,     // 设置每次迭代动画持续时间
    // delay: 1000,         // 设置动画延迟开始时间
    // interation: 2        // 设置动画迭代次数
	};


	//发送请求改变区域状态
	var xhr = new XMLHttpRequest();
	xhr.open('get', 'http://123.57.109.182:8081/gz/guzhen/base/list');
	//可以设置请求头，一般不设置
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	xhr.onreadystatechange = function () {
		if (xhr.readyState === 4 && xhr?.status === 200) { // 请求完成并且响应状态为 200 OK
			var data = JSON.parse(xhr.responseText); // 解析服务器返回的数据
			// 在此处进行数据处理或页面更新操作
			polylinList = data.data
			polylinList = polylinList.map(item => {
				let color = 'rgb(189, 101, 101)'
				if (item?.status == 0) {
					color = '#E65B4D'
				} else if (item?.status == 1) {
					color = 'rgb(219, 179, 104)'
				} else {
					color = 'green'
				}
				return {
					id: item.id,
					status: item?.status,
					color: color
				}
			})
			initLine()
			initArea()
			console.log(polylinList, 'polylinList');
		}
	}
	xhr.send()	//get 请求不传 body 参数，只有 post 请求使用
	function initLine(){
		initPolylin(polylinArr[0].pointArr, polylinList[0].color)
		initMarker(new BMapGL.Point(117.330593,33.34071),0)

		initPolylin(polylinArr[1].pointArr, polylinList[1].color)
		initMarker(new BMapGL.Point(117.330844,33.336819),1)

		initPolylin(polylinArr[2].pointArr, polylinList[2].color)
		initMarker(new BMapGL.Point(117.333144,33.333652),2)

		initPolylin(polylinArr[3].pointArr, polylinList[3].color)
		initMarker(new BMapGL.Point(117.332066,33.339292),3)

		initPolylin(polylinArr[4].pointArr, polylinList[4].color)
		initMarker(new BMapGL.Point(117.332928,33.330243),4)

		initPolylin(polylinArr[5].pointArr, polylinList[5].color)
		initMarker(new BMapGL.Point(117.323442,33.339142),5)

		initPolylin(polylinArr[6].pointArr, polylinList[6].color)
		initMarker(new BMapGL.Point(117.318843,33.328072),6)

		initPolylin(polylinArr[7].pointArr, polylinList[7].color)
		initMarker(new BMapGL.Point(117.325526,33.325538),7)

		initPolylin(polylinArr[8].pointArr, polylinList[8].color)
		initMarker(new BMapGL.Point(117.330269,33.334104),8)

		initPolylin(polylinArr[9].pointArr, polylinList[9].color)
		initMarker(new BMapGL.Point(117.331743,33.332988),9)

		initPolylin(polylinArr[10].pointArr, polylinList[10].color)
		initMarker(new BMapGL.Point(117.337851,33.332174),10)

		initPolylin(polylinArr[11].pointArr, polylinList[11].color)
		initMarker(new BMapGL.Point(117.351146,33.330002),11)
		
		initPolylin(polylinArr[12].pointArr, polylinList[12].color)
		initMarker(new BMapGL.Point(117.350104,33.325145),12)

		initPolylin(polylinArr[13].pointArr, polylinList[13].color)
		initMarker(new BMapGL.Point(117.341354,33.328916),13)

		initPolylin(polylinArr[14].pointArr, polylinList[14].color)
		initMarker(new BMapGL.Point(117.326919,33.327393),14)

		initPolylin(polylinArr[15].pointArr, polylinList[15].color)
		initMarker(new BMapGL.Point(117.333386,33.327876),15)

		initPolylin(polylinArr[16].pointArr, polylinList[16].color)
		initMarker(new BMapGL.Point(117.339172,33.328679),16)

		initPolylin(polylinArr[17].pointArr, polylinList[17].color)
		initMarker(new BMapGL.Point(117.335758,33.324874),17)

		initPolylin(polylinArr[18].pointArr, polylinList[18].color)
		initMarker(new BMapGL.Point(117.328293,33.323724),18)

		initPolylin(polylinArr[19].pointArr, polylinList[19].color)
		initMarker(new BMapGL.Point(117.344067,33.32131),19)

		initPolylin(polylinArr[20].pointArr, polylinList[20].color)
		initMarker(new BMapGL.Point(117.320783,33.324629),20)

		initPolylin(polylinArr[21].pointArr, polylinList[21].color)
		initMarker(new BMapGL.Point(117.322364,33.324327),21)

		initPolylin(polylinArr[22].pointArr, polylinList[22].color)
		initMarker(new BMapGL.Point(117.322795,33.323384),22)
		
		initPolylin(polylinArr[23].pointArr, polylinList[23].color)
		initMarker(new BMapGL.Point(117.323325,33.322759),23)

		initPolylin(polylinArr[24].pointArr, polylinList[24].color)
		initMarker(new BMapGL.Point(117.317864,33.323136),24)

		initPolylin(polylinArr[25].pointArr, polylinList[25].color)
		initMarker(new BMapGL.Point(117.314306,33.323829),25)

		initPolylin(polylinArr[26].pointArr, polylinList[26].color)
		initMarker(new BMapGL.Point(117.315295,33.32392),26)

		initPolylin(polylinArr[27].pointArr, polylinList[27].color)
		initMarker(new BMapGL.Point(117.314899,33.323226),27)

		initPolylin(polylinArr[28].pointArr, polylinList[28].color)
		initMarker(new BMapGL.Point(117.31763,33.320209),28)

		initPolylin(polylinArr[29].pointArr, polylinList[29].color)
		initMarker(new BMapGL.Point(117.318061,33.319772),29)

		initPolylin(polylinArr[30].pointArr, polylinList[30].color)
		initMarker(new BMapGL.Point(117.320577,33.320375),30)

		initPolylin(polylinArr[31].pointArr, polylinList[31].color)
		initMarker(new BMapGL.Point(117.317972,33.318037),31)

		initPolylin(polylinArr[32].pointArr, polylinList[32].color)
		initMarker(new BMapGL.Point(117.326829,33.31947),32)

		initPolylin(polylinArr[33].pointArr, polylinList[33].color)
		initMarker(new BMapGL.Point(117.326505,33.317464),33)

		initPolylin(polylinArr[34].pointArr, polylinList[34].color)
		initMarker(new BMapGL.Point(117.323703,33.315488),34)

		initPolylin(polylinArr[35].pointArr, polylinList[35].color)
		initMarker(new BMapGL.Point(117.324996,33.316197),35)

		initPolylin(polylinArr[36].pointArr, polylinList[36].color)
		initMarker(new BMapGL.Point(117.324367,33.317343),36)

		initPolylin(polylinArr[37].pointArr, polylinList[37].color)
		initMarker(new BMapGL.Point(117.324637,33.317313),37)

		initPolylin(polylinArr[38].pointArr, polylinList[38].color)
		initMarker(new BMapGL.Point(117.327116,33.317011),38)

		initPolylin(polylinArr[39].pointArr, polylinList[39].color)
		initMarker(new BMapGL.Point(117.330206,33.316212),39)

		initPolylin(polylinArr[40].pointArr, polylinList[40].color)
		initMarker(new BMapGL.Point(117.336171,33.315609),40)

		initPolylin(polylinArr[41].pointArr, polylinList[41].color)
		initMarker(new BMapGL.Point(117.339225,33.316996),41)

		initPolylin(polylinArr[42].pointArr, polylinList[42].color)
		initMarker(new BMapGL.Point(117.341813,33.316891),42)

		initPolylin(polylinArr[43].pointArr, polylinList[43].color)
		initMarker(new BMapGL.Point(117.341058,33.314477),43)

		initPolylin(polylinArr[44].pointArr, polylinList[44].color)
		initMarker(new BMapGL.Point(117.347885,33.318158),44)

		initPolylin(polylinArr[45].pointArr, polylinList[45].color)
		initMarker(new BMapGL.Point(117.344076,33.312818),45)

		initPolylin(polylinArr[46].pointArr, polylinList[46].color)
		initMarker(new BMapGL.Point(117.341597,33.309258),46)

		initPolylin(polylinArr[47].pointArr, polylinList[47].color)
		initMarker(new BMapGL.Point(117.349987,33.315005),47)

		initPolylin(polylinArr[48].pointArr, polylinList[48].color)
		initMarker(new BMapGL.Point(117.340663,33.311596),48)

		initPolylin(polylinArr[49].pointArr, polylinList[49].color)
		initMarker(new BMapGL.Point(117.314064,33.33691),49)

		initPolylin(polylinArr[50].pointArr, polylinList[50].color)
		initMarker(new BMapGL.Point(117.317918,33.312482),50)
		
		initPolylin(polylinArr[51].pointArr, polylinList[51].color)
		initMarker(new BMapGL.Point(117.295694,33.302706),51)

		initPolylin(polylinArr[52].pointArr, polylinList[52].color)
		initMarker(new BMapGL.Point(117.300185,33.29984),52)

		initPolylin(polylinArr[53].pointArr, polylinList[53].color)
		initMarker(new BMapGL.Point(117.297562,33.301741),53)

		initPolylin(polylinArr[54].pointArr, polylinList[54].color)
		initMarker(new BMapGL.Point(117.307982,33.291088),54)

		initPolylin(polylinArr[55].pointArr, polylinList[55].color)
		initMarker(new BMapGL.Point(117.31021,33.288976),55)

		initPolylin(polylinArr[56].pointArr, polylinList[56].color)
		initMarker(new BMapGL.Point(117.312258,33.293834),56)

		initPolylin(polylinArr[57].pointArr, polylinList[57].color)
		initMarker(new BMapGL.Point(117.318295,33.285324),57)

		initPolylin(polylinArr[58].pointArr, polylinList[58].color)
		initMarker(new BMapGL.Point(117.320092,33.287708),58)
	}

	function initArea() {
		initPolylin1(areaArr[0].pointArr, '#1188b8')
		initPolylin1(areaArr[1].pointArr, '#1188b8')
		initPolylin1(areaArr[2].pointArr, '#1188b8')
		initPolylin1(areaArr[3].pointArr, '#1188b8')
		initPolylin1(areaArr[4].pointArr, '#1188b8')
		initPolylin1(areaArr[5].pointArr, '#1188b8')
		initPolylin1(areaArr[6].pointArr, '#1188b8')
		initPolylin1(areaArr[7].pointArr, '#1188b8')
		initPolylin1(areaArr[8].pointArr, '#1188b8')
		initPolylin1(areaArr[9].pointArr, '#1188b8')
		initPolylin1(areaArr[10].pointArr, '#1188b8')
		initPolylin1(areaArr[11].pointArr, '#1188b8')
		initPolylin1(areaArr[12].pointArr, '#1188b8')
		initPolylin1(areaArr[13].pointArr, '#1188b8')
		initPolylin1(areaArr[14].pointArr, '#1188b8')
		initPolylin1(areaArr[15].pointArr, '#1188b8')
		initPolylin1(areaArr[16].pointArr, '#1188b8')
		initPolylin1(areaArr[17].pointArr, '#1188b8')
		initPolylin1(areaArr[18].pointArr, '#1188b8')
		initPolylin1(areaArr[19].pointArr, '#1188b8')
		initPolylin1(areaArr[20].pointArr, '#1188b8')
		initPolylin1(areaArr[21].pointArr, '#1188b8')
		initPolylin1(areaArr[22].pointArr, '#1188b8')
		initPolylin1(areaArr[23].pointArr, '#1188b8')
		initPolylin1(areaArr[24].pointArr, '#1188b8')
		initPolylin1(areaArr[25].pointArr, '#1188b8')
		initPolylin1(areaArr[26].pointArr, '#1188b8')
		initPolylin1(areaArr[27].pointArr, '#1188b8')
		initPolylin1(areaArr[28].pointArr, '#1188b8')
		initPolylin1(areaArr[29].pointArr, '#1188b8')
		initPolylin1(areaArr[30].pointArr, '#1188b8')
		initPolylin1(areaArr[31].pointArr, '#1188b8')
		initPolylin1(areaArr[32].pointArr, '#1188b8')
		initPolylin1(areaArr[33].pointArr, '#1188b8')
		initPolylin1(areaArr[34].pointArr, '#1188b8')
		initPolylin1(areaArr[35].pointArr, '#1188b8')
		initPolylin1(areaArr[36].pointArr, '#1188b8')
		initPolylin1(areaArr[37].pointArr, '#1188b8')
		initPolylin1(areaArr[38].pointArr, '#1188b8')
		initPolylin1(areaArr[39].pointArr, '#1188b8')
		initPolylin1(areaArr[40].pointArr, '#1188b8')
		initPolylin1(areaArr[41].pointArr, '#1188b8')
		initPolylin1(areaArr[42].pointArr, '#1188b8')
		initPolylin1(areaArr[43].pointArr, '#1188b8')
		initPolylin1(areaArr[44].pointArr, '#1188b8')
		initPolylin1(areaArr[45].pointArr, '#1188b8')
		initPolylin1(areaArr[46].pointArr, '#1188b8')
		initPolylin1(areaArr[47].pointArr, '#1188b8')
		initPolylin1(areaArr[48].pointArr, '#1188b8')
		initPolylin1(areaArr[48].pointArr, '#1188b8')
		initPolylin1(areaArr[49].pointArr, '#1188b8')
		initPolylin1(areaArr[50].pointArr, '#1188b8')
		initPolylin1(areaArr[51].pointArr, '#1188b8')
		initPolylin1(areaArr[52].pointArr, '#1188b8')
		initPolylin1(areaArr[53].pointArr, '#1188b8')
		initPolylin1(areaArr[54].pointArr, '#1188b8')
		initPolylin1(areaArr[55].pointArr, '#1188b8')
		initPolylin1(areaArr[56].pointArr, '#1188b8')
		initPolylin1(areaArr[57].pointArr, '#1188b8')
		initPolylin1(areaArr[58].pointArr, '#1188b8')
		initPolylin1(areaArr[59].pointArr, '#1188b8')
		initPolylin1(areaArr[60].pointArr, '#1188b8')
		initPolylin1(areaArr[61].pointArr, '#1188b8')
		initPolylin1(areaArr[62].pointArr, '#1188b8')
		initPolylin1(areaArr[63].pointArr, '#1188b8')
		initPolylin1(areaArr[64].pointArr, '#1188b8')
		initPolylin1(areaArr[65].pointArr, '#1188b8')
		initPolylin1(areaArr[66].pointArr, '#1188b8')
		initPolylin1(areaArr[67].pointArr, '#1188b8')
		initPolylin1(areaArr[68].pointArr, '#1188b8')
		initPolylin1(areaArr[69].pointArr, '#1188b8')
		initPolylin1(areaArr[70].pointArr, '#1188b8')
		initPolylin1(areaArr[71].pointArr, '#1188b8')
		initPolylin1(areaArr[72].pointArr, '#1188b8')
		initPolylin1(areaArr[73].pointArr, '#1188b8')
		initPolylin1(areaArr[74].pointArr, '#1188b8')
		initPolylin1(areaArr[75].pointArr, '#1188b8')
		initPolylin1(areaArr[76].pointArr, '#1188b8')
		initPolylin1(areaArr[77].pointArr, '#1188b8')
		initPolylin1(areaArr[78].pointArr, '#1188b8')
		initPolylin1(areaArr[79].pointArr, '#1188b8')
		initPolylin1(areaArr[80].pointArr, '#1188b8')
		initPolylin1(areaArr[81].pointArr, '#1188b8')
		initPolylin1(areaArr[82].pointArr, '#1188b8')
		// initPolylin1(areaArr[83].pointArr, '#1188b8')
	}

	function initPolylin(pointArr, color) {
		// console.log(pointArr, color, 'pointArr');
		var polylin = new BMapGL.Polyline(pointArr, {
			strokeColor: color, strokeWeight: 3, strokeOpacity: .8
		})
		map.addOverlay(polylin);
	}
	function initPolylin1(pointArr, color) {
		// console.log(pointArr, color, 'pointArr');
		var polylin = new BMapGL.Polyline(pointArr, {
			strokeStyle: 'dashed',
			strokeColor: color, strokeWeight: 3, strokeOpacity: .8
		})
		map.addOverlay(polylin);
	}

	function initMarker(point,index) {
		var myIcon = new BMapGL.Icon("./local.png", new BMapGL.Size(35, 55), {     
				anchor: new BMapGL.Size(15, 35),      
		});     
		var marker = new BMapGL.Marker(point, {icon: myIcon});   
		map.addOverlay(marker); 
		marker.addEventListener("click", function () {
			// confirmPopup(index)
			showPopup(index)
		});
	}
	
	let currentIndex
	function showPopup(index) {
		currentIndex = index
		if(polylinList[currentIndex]?.status== 2){
			var popup = document.getElementById("popup1");
		}else{
			var popup = document.getElementById("popup");
		}
		popup.style.display = "block";
		popup.style.zIndex = 999;
	}

	function hidePopup() {
			var popup = document.getElementById("popup");
			var popup1 = document.getElementById("popup1");
			popup.style.display = "none";
			popup1.style.display = "none";
	}

	function confirmPopup() {
		hidePopup()
		console.log(polylinList[currentIndex],'polylinList[currentIndex]');
		
		if (polylinList[currentIndex]?.status == 2) {
			polylinList[currentIndex].status=0
			console.log(polylinList[currentIndex]?.status, 'polylinList[currentIndex].status');
			sendStatus(polylinList[currentIndex]?.status,currentIndex)
			initPolylin(polylinArr[currentIndex].pointArr, '#FA4145')
		} else {
			++polylinList[currentIndex].status
			console.log(polylinList[currentIndex]?.status, 'polylinList[currentIndex].status');
			sendStatus(polylinList[currentIndex]?.status,currentIndex)
			if (polylinList[currentIndex]?.status == 1) {
				initPolylin(polylinArr[currentIndex].pointArr, 'rgb(219, 179, 104)')
			} else {
				initPolylin(polylinArr[currentIndex].pointArr, 'green')
			}
		}
	}

	function sendStatus(status,index) {
		//发送请求改变区域状态
		var xhr = new XMLHttpRequest();
		xhr.open('post', 'http://123.57.109.182:8081/gz/guzhen/base/updatePoint');
		//可以设置请求头，一般不设置
		xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
		xhr.onreadystatechange = function () {
			if (xhr.readyState === 4 && xhr?.status === 200) { // 请求完成并且响应状态为 200 OK
				var data = JSON.parse(xhr.responseText); // 解析服务器返回的数据
				// 在此处进行数据处理或页面更新操作
				console.log(polylinList, 'polylinList');
			}
		}
		xhr.send(JSON.stringify({
				"id": ++index,
				"status": status
			})
		)	//get 请求不传 body 参数，只有 post 请求使用
	}

</script>

<style type="text/css">
	html {
		height: 100%
	}
	body {
		height: 100%;
		margin: 0px;
		padding: 0px
	}
	#container {
		height: 100%;
		transition: all 1s ease;
	}
	.map-type button{
		position: absolute;
		left: 0;
		bottom: 0;
		border: none;
		box-shadow: 0 0 5px 1px rgb(201, 201, 198);;
		color: rgb(67, 68, 69);
		background-color: #ffffff;
		z-index: 1000;
		line-height: 4vh;
		cursor: pointer;
	}
	.popup-container {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.popup-content {
		width: 20vw;
		border-radius: 10px;
		position: absolute;
		top: 50%;
		left: 50%;
		color: #fff;
		font-size: 1vw;
		transform: translate(-50%, -50%);
		background-color: #154C7B;
		padding: 2vw;
		text-align: center;
	}

	.option {
		display: flex;
		/* background-color: #ba7070; */
	}

	label {
		margin-right: 10px;
	}

	.btns {
		margin-top: 2vw;
		display: flex;
		justify-content: space-around;
	}
	.btn{
		width: 2vw;
		cursor: pointer;
		line-height: 2vw;
		padding: 0 1.2vw;
		border: .1vw solid #fff;
	}
	.confirm{
		background-color: #61B5F7;
	}
	.mark{
    position: absolute;
    right: 1.5vw;
		font-size: .8vw;
		color: #fff;
    bottom: 5vw;
  }
	.mark .box{
		display: flex;
		width: 5vw;
		height: 2vw;
		margin-top: .5vw;
		align-items: center;
		padding:0 1vw;
		justify-content: space-between;
		background-color: rgba(21, 100, 139, 1);
	}
	.mark span{
		display: block;
		width: .75vw;
		height: .75vw;
		border-radius: 1.25vw;
		background-color: #fff;
	}
	.mark .green{
		background-color: green;
	}
	.mark .orange{
		background-color: rgb(219, 179, 104);
	}
	.mark .red{
		background-color: #E65B4D;
	}
</style>

</html>